<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'

const props = defineProps<{ inputValue: string }>();
const emits = defineEmits(['update:modelValue']);
const inputRef = ref();
const searchValue = ref('');

const handleEmits = (value: string) => {
  emits('update:modelValue', value)
};

const inputValueCurrent = computed({
  get: () => {
    console.log(props.inputValue);
    return props.inputValue;
  },
  set: (value: string) => {
    handleEmits(value);
    getSearchValue(value);
  }
});

/**
 * 
 * @param value 输入内容
 */
const getStartAndEndIndex = (value: string) => {
  // 输入框光标索引值
  // const index = inputRef.value.input.selectionStart;
  const index = inputRef.value.input?.selectionStart ? inputRef.value.input.selectionStart - 1 : -1;
  // console.log('获取的索引值', index);
  
  const valueArr = value.split('');
  // console.log('valueArr', valueArr);
  // 光标索引前的字符 包括光标索引所处的的字符
  const preValue = value.slice(0, index + 1);
  // 光标索引后的字符 包括光标索引所处的的字符
  const backValue = value.slice(index + 1, value.length);
  // 字符串截取的起始索引值
  let startIndex = -1;
  let endIndex = -1;

  // 光标所处位置为 /
  if(valueArr[index]?.includes('/')) {
    startIndex = index + 1;
  }

  // 光标所处位置的下一个为 /
  if(valueArr[index + 1]?.includes('/')) {
    endIndex = index + 1;
  }
  if(startIndex === -1) {
    // 光标前的最后一个/对应的索引值
    const findIndex = preValue.lastIndexOf('/');
    findIndex > -1 && (startIndex = findIndex + 1);
  }
  if(endIndex === -1) {
    // 光标后第一个/对应的索引值
    const findIndex = backValue.indexOf('/');
    findIndex > -1 && (endIndex = findIndex + preValue.length);
  }
  const start = startIndex === -1 ? 0 : startIndex;
  const end = endIndex === -1 ? value.length : endIndex;
  return { start, end };
};

const getSearchValue = (value: string) => {
  handleEmits(value);
  if(!value) return;
  const { start, end } = getStartAndEndIndex(value);
  // 需要搜索的目标值
  searchValue.value= value.slice(start, end);
}



/**
 * 替换输入内容指定光标对应值
 */
const replaceValue = (code: string) => {
  const { start, end } = getStartAndEndIndex(inputValueCurrent.value);
  const pre = inputValueCurrent.value.slice(0, start);
  const back = inputValueCurrent.value.slice(end);
  handleEmits(`${pre}${code}${back}`)
};

const setRandomText = (length?: number) => {
  let rand = "";
  const lengthNum = length || 3
  for(var i = 0; i < (lengthNum -1); i++){
    var r = Math.floor(Math.random() * 10);
    rand += r;
  }
  // 替换
  replaceValue(rand);
};

const keyup = async (e: any) => {
  const keyCodes = [37, 38, 39, 40];
  // console.log('keyup', e.srcElement.selectionStart, inputRef.value.input.selectionStart);
  // console.log('keyup', inputRef.value.input.selectionStart);
  if(keyCodes.includes(e.keyCode)) {
    await nextTick();
    getSearchValue(inputValueCurrent.value);
  }
};

const inputClick = () => {
  getSearchValue(inputValueCurrent.value);
};
</script>

<template>
  <el-button @click="setRandomText()">替换</el-button>
  <el-input v-model="inputValueCurrent" ref="inputRef" @keyup="keyup" @click="inputClick"></el-input>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
